<template>
  <Page>
    <FlowDesigner v-if="!loading" v-model="entity.modelXml" :extend-types="extendTypes">
      <template #toolbar-buttons="{ modeler }">
        <ElTooltip effect="light" content="保存流程">
          <ConfirmButton
            size="mini"
            type="primary"
            :confirmable="false"
            loadable
            icon="el-icon-takeaway-box"
            @click="saveFlow(modeler)">
            保存
          </ConfirmButton>
        </ElTooltip>
      </template>
      <template #task="{ id, element, bpmnInstances, type }">
        <ElCollapseItem v-if="type === 'UserTask'" name="task">
          <template #title>
            <div class="panel-tab__title"><i class="el-icon-s-claim"></i>处理人</div>
          </template>
          <TaskConfig :id="id" :bpmn-instances="bpmnInstances" :element="element" :type="type" />
        </ElCollapseItem>
      </template>
      <template #form="{ id, element, bpmnInstances, type }">
        <ElCollapseItem v-if="type === 'UserTask'" name="form">
          <template #title>
            <div class="panel-tab__title"><i class="el-icon-s-order"></i>表单权限</div>
          </template>
          <FormConfig :id="id" :bpmn-instances="bpmnInstances" :element="element" :type="type" />
        </ElCollapseItem>
      </template>
    </FlowDesigner>
    <LoadingView v-if="loading" icon-size="34px" font-size="16px" />
  </Page>
</template>

<script>
  import { loadFlowByModelKey, saveFlowByModel, validateFlowModel } from '@/api/admin/workitem'
  import TaskConfig from './panel/task-config/TaskConfig.vue'
  import FormConfig from './panel/form-config/FormConfig.vue'
  import X2JS from 'x2js'

  export default {
    name: 'FlowDesign',
    components: {
      TaskConfig,
      FormConfig
    },
    props: {
      modelKey: String
    },
    data() {
      return {
        entity: {
          appSn: null,
          categoryCode: null,
          id: null,
          modelId: '',
          modelKey: '',
          modelName: '',
          modelXml: '',
          fileName: ''
        },
        loading: true,
        extendTypes: Object.freeze([
          {
            name: 'EnabledFields',
            superClass: ['Element'],
            properties: [{ name: 'body', isBody: true, type: 'String' }]
          },
          {
            name: 'EnabledButtons',
            superClass: ['Element'],
            properties: [{ name: 'body', isBody: true, type: 'String' }]
          },
          {
            name: 'DisabledButtons',
            superClass: ['Element'],
            properties: [{ name: 'body', isBody: true, type: 'String' }]
          },
          {
            name: 'HideFields',
            superClass: ['Element'],
            properties: [{ name: 'body', isBody: true, type: 'String' }]
          }
        ])
      }
    },
    watch: {
      modelKey: {
        immediate: true,
        async handler(newValue) {
          const res = await loadFlowByModelKey(newValue)
          res.data.data = res.data.data || this.entity
          this.entity = res.data.data
          this.loading = false
        }
      }
    },
    methods: {
      async saveFlow(modeler) {
        const { xml } = await modeler.saveXML()
        const newConvert = new X2JS()
        const { definitions } = newConvert.xml2js(xml)
        await validateFlowModel({
          modelXml: xml,
          modelId: this.entity.modelId,
          modelKey: definitions.process._id,
          modelName: definitions.process._name
        })
        await saveFlowByModel({
          modelXml: xml,
          modelId: this.entity.modelId,
          modelKey: definitions.process._id,
          modelName: definitions.process._name
        })
        this.$message.success('保存成功!')
      }
    }
  }
</script>
